<template>
  <div>
    <!-- 顶部滑动条区域 @tap替换@click，@tap只适合mui使用-->
    <div id="slider" class="mui-slider ">
      <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
          <a :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" v-for="item in cates" :key="item.id" 
          @tap="getPhotoListByCateId(item.id)">
            {{ item.title }}
          </a>
         
        </div>
      </div>
		</div>
 
    <!-- 图片列表区域 -->
    <ul class="photo-list">
      <router-link v-for="item in list" :key="item.id" :to="'/home/photoinfo/' + item.id" tag="li">
        <img v-lazy="item.img_url">
        <div class="info">
          <h1 class="info-title">{{ item.title}}</h1>
          <div class="info-body">{{ item.zhaiyao}}</div>
        </div>
      </router-link>
    </ul>


  </div>
</template>
<script>
  // 1. 导入 mui 的js文件 
  import mui from '../../lib/mui/js/mui.min.js'


  export default {
    data() {
      return {
        cates:[],  //图片分类数组
        list:[]   //图片列表
      }
    },
    created(){ 
      //表示data和methods已经创建好了 
      this.getAllCategory()  //获取所有图片分类
      this.getPhotoListByCateId(0) //默认进入页面，就请求所有图片
    },
    mounted(){ //表示组件的DOM结构已经渲染好并放到页面中，会执行这个钩子函数
      // 2. 初始化滑动控件
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      });
    },
    methods:{
      getAllCategory(){  // 获取所有图片分类
       
        /* this.$http.get("api/getimgcategory").then(result=>{
          if(result.body.status === 0){
            result.body.message.unshift({ title:"全部", id:0 });
            this.cates = result.body.message;
          }
        }); */
        // 模拟数据
        var picArr = []
        var picCateobj1 = { title: "明星美女", id: 1 }
        var picCateobj2 = { title: "摄影设计", id: 2 }
        var picCateobj3 = { title: "家居生活", id: 3 }
        var picCateobj4 = { title: "摄影器材", id: 4 }
        var picCateobj5 = { title: "明星写真", id: 5 }
        var picCateobj6 = { title: "清纯甜美", id: 6 }
        var picCateobj7 = { title: "古典美女", id: 7 }
        this.cates.push(picCateobj1)
        this.cates.push(picCateobj2)
        this.cates.push(picCateobj3)
        this.cates.push(picCateobj4)
        this.cates.push(picCateobj5)
        this.cates.push(picCateobj6)
        this.cates.push(picCateobj7)
        this.cates.unshift({ title:"全部", id:0 });
        // 家居生活,摄影设计,明星美女,摄影器材,明星写真,清纯甜美,古典美女

      },
      getPhotoListByCateId(cateId){ //根据图片分类Id获取图片列表
        
        /* this.$http.get("api/getimages" + cateId).then(result=>{
          if(result.body.status === 0){
            this.list = result.body.message;
          }
        }) */
        // 模拟数据： http://www.win4000.com/retu.html
        this.list = []
        if(cateId==0 || cateId==1){
          var imgObj1={id:1,img_url:"http://pic1.win4000.com/pic/9/3d/6f61c2043a_250_350.jpg",title:"春分图片 二十四节气春分图片片",zhaiyao:"春分图片 二十四节气春分图片"}
          var imgObj2={id:2,img_url:"http://pic1.win4000.com/pic/f/99/64e944703a_250_350.jpg",title:"宋妍霏性感露脐装街拍写真图片",zhaiyao:"宋妍霏性感露脐装街拍写真图片"}
          var imgObj3={id:3,img_url:"http://pic1.win4000.com/pic/6/04/ea5115ac19_250_350.jpg",title:"tfboys王源'半成年'时尚杂志",zhaiyao:"tfboys王源'半成年'时尚杂志"}
          var imgObj4={id:4,img_url:"http://pic1.win4000.com/pic/f/42/0f854c7b27_250_350.jpg",title:"黄晓明全球旅游形象大使澳大利",zhaiyao:"黄晓明全球旅游形象大使澳大利"}
          var imgObj5={id:5,img_url:"http://pic1.win4000.com/pic/2/3c/a56af832b8_250_300.jpg",title:"杨幂《谈判官》剧照图片",zhaiyao:"杨幂《谈判官》剧照图片"}
          
          this.list.push(imgObj1)
          this.list.push(imgObj2)
          this.list.push(imgObj3)
          this.list.push(imgObj4)
          this.list.push(imgObj5)
        }
       
      }

    }
  }
</script>
<style lang="scss" scoped>
* {
  touch-action: pan-y;
}
.photo-list{
  list-style: none;  //去掉那个小黑点
  margin: 0;
  padding: 10px;
  padding-bottom: 0;
  li{
    background-color: #ccc;
    text-align: center;
    margin-bottom: 10px;
    box-shadow: 0 0 9px #999;  //阴影：h-shadow必须/水平阴影的位置 v-shadow必须/垂直阴影的位置 blur可选。模糊距离 spread color可选。阴影的颜色) inset;
    position: relative;
    img{
      width: 100%;              //让图片撑满显示
      vertical-align: middle;  //解决图片三像素的问题
      img[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
      }
    }
    .info{
      color:white;
      text-align: left;
      position: absolute; //让文字覆盖在每个li上，将li设置为position: relative; 本身div设置为absolute，bottom设置为0
      bottom: 0;          
      padding-left: 5px;
      width:100%;
      //background-color: rgba(0, 0, 0, 0.4);  // 设置文字透明度:red,green,blue,alpha 
      background-color: rgba($color: #000000, $alpha: 0.3);
      max-height: 60px;
      .info-title{
        font-size: 14px;
      }
      .info-body {
        font-size: 13px;
      }
    }
  }
}

</style>
